<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all"/>
</head>
<body>
    <!--数据表格-->
    <table id="goodsTable" lay-filter="goods"></table>
    <div id="pageDemo"></div>
</body>
<!-- 侧边工具栏 layTpl模板 -->
<script type="text/html" id="rightBar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">更新</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--头部工具栏-->
<script type="text/html" id="topBar">
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">
        <i class="layui-icon">&#xe608;</i>添加
    </button>
</script>
<script src="/layui/layui.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
   layui.use(['table','laypage','jquery','layer','form'],function () {
      var table=layui.table;
      var laypage=layui.laypage;
      var $=layui.jquery;
      var layer=layui.layer;
      var form=layui.form;
      //展示一行数据
      console.log(table);

        //加载数据
       table.render({
           elem:'#goodsTable',
           url:'/goods/findAll',
           page:true,
           limit:3,
           skin:'#e77c8e',
           limits:[3,5,10,15,20,30],
           cols:[[
               {field:"id",title:"编号",width:120,sort:true},
               {field:"name",title:"姓名",width:120,edit:"text"},
               {field:"sex",title:"性别",width:120,edit:"text"},
               {field:"age",title:"年龄",width:120,edit:"text"},
               {field:"address",title:"地址",width:260,edit:"text"},
               {field:"number",title:"QQ号",width:120,edit:"text"},
               {field:"email",title:"邮箱",width:180,edit:"text"},
               {field:"操作",title:"操作",toolbar:"#rightBar",align:"center"}
           ]],
           toolbar:'#topBar',
       });

       /*监听行工具栏*/
        table.on('tool(goods)',function (obj) {
            //获取当前行数据
            var data=obj.data;
            //打印
            console.log(data);
            //获取lay-event的值
            var event=obj.event;

            //判断点击的按钮
            switch (event) {
                //删除
                case 'del':
                    layer.confirm("确认删除吗?",function (index) {
                        $.ajax({
                            type:"get",
                            url:"/goods/deleteById?id="+data.id,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",//返回的数据类型格式
                            success:function (rel) {
                                obj.del();
                                layer.msg(rel.msg,{icon: 1,time: 1250});
                            },
                            error:function (rel) {
                                console.log(rel, 'error');
                                layer.msg("查询商品异常，请联系管理员！", {icon: 2, time: 1250});
                            }
                        });
                        //关闭弹出框
                        layer.close(index);
                    });
                    break;
                //修改更新
                case 'edit':
                    /* icon 1 绿色 成功 √
                    *       2 红色 失败 ×
                    *       3 黄色 询问 ?
                    *       4 灰色 禁止 🔒
                    *       5 红色 表情 😟
                    *       6 绿色 表情 🙂
                    *       7 黄色 叹号 ！
                    * */
                    layer.msg("功能已取消",{icon: 7,time: 1250});
                    /*点击【更新】按钮 实现修改,感觉多此一举*/
                    /*layer.confirm("确认更新吗?",function (index) {
                        $.ajax({
                            type:"post",
                            url:"/goods/updateById",
                            data:JSON.stringify(data),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",//返回的数据类型格式
                            success:function (rel) {
                                layer.msg(rel.msg,{icon: 1,time: 1250});
                            },error:function () {
                                layer.msg("修改失败，请联系管理员！", {icon: 2, time: 1250});
                            },
                        });
                        layer.close(index);
                    });*/
                    //通过子页面更新数据 可用 比较麻烦
                    /*layer.open({
                        type:2,
                        title:"信息修改",
                        area:['500px','600px'],
                        offset:'auto',
                        content:'reuse.html',
                        btn:['提交','关闭'],
                        yes:function(){
                            $.ajax({
                                type:"post",
                                url:"/goods/updateById",
                                data:JSON.stringify(data),
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",//返回的数据类型格式
                                success:function (rel) {
                                    layer.msg(rel.msg,{icon: 1,time: 1250});
                                },error:function () {
                                    layer.msg("修改失败，请联系管理员！", {icon: 2, time: 1250});
                                },
                            });
                            //完成后关闭
                            layer.closeAll();
                        },
                        btn2:function(){
                            //第二个按钮，关闭
                            layer.closeAll();
                        },
                        success:function (layero,index) {
                            // 方式二 获取当前行的数据并展示在子页面上
                            var body = layer.getChildFrame('body', index);

                            //找到子页面的id赋值
                            body.find("#id").val(data.id);
                            body.find("#name").val(data.name);
                            body.find("#sex").val(data.sex);
                            body.find("#age").val(data.age);
                            body.find("#address").val(data.address);
                            body.find("#number").val(data.number);
                            body.find("#email").val(data.email);
                        },
                    });*/
                    break;
            } //switch 结束位置
        }); //监听行工具栏结束位置

       /*监听数据表格edit*/
       /*由于使用监听功能，按钮【更新】冲突无法更新*/
       table.on('edit(goods)',function (data) {
           //获取行数据
           var tr=data.data;
           $.ajax({
               type:"post",
               url:"/goods/updateById",
               data:JSON.stringify(tr),
               contentType: "application/json; charset=utf-8",
               dataType: "json",//返回的数据类型格式
               success:function (rel) {
                   layer.msg(rel.msg,{icon: 1,time: 1250});
               },error:function () {
                   layer.msg("修改失败，请联系管理员！", {icon: 2, time: 1250});
               },
           });
       });

       /*监听添加按钮 实现添加数据 完成*/
       table.on('toolbar(goods)',function (addObj) {
           //通过子页面添加数据
           layer.open({
               type:2,
               title:"信息添加",
               area:['500px','600px'],
               offset:'auto',
               content:'reuse.html',
               btn:['提交','关闭'],
               yes:function(index, layero){
                   // //得到iframe页面中body 的值
                   var body = layer.getChildFrame('body', index);
                   //根据弹出层页面的form id取值
                   var name=body.find("#name").val();
                   var sex=body.find("#sex").val();
                   var age=body.find("#age").val();
                   var address=body.find("#address").val();
                   var number=body.find("#number").val();
                   var email=body.find("#email").val();

                   var data={
                       name:name,
                       sex:sex,
                       age:age,
                       address:address,
                       number:number,
                       email:email
                   };

                   $.ajax({
                       type:"post",
                       url:"/goods/add",
                       data:JSON.stringify(data),
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",//返回的数据类型格式
                       success:function (rel) {
                           layer.msg(rel.msg,{icon: 1,time: 1250});
                       },error:function () {
                           layer.msg("添加失败，请联系管理员！", {icon: 2, time: 1250});
                       },
                   });
                   //完成后关闭
                   layer.closeAll();
               },
               btn2:function(){
                   //第二个按钮，关闭
                   layer.closeAll();
               },
           });
       })
   });
</script>
</html>